<template>
	<view class="add-reimbursement-container">
		<!-- 基本信息部分 -->
		<view class="form-item">
			<label>姓名</label>
			<view class="form-value">{{userName}}</view>
		</view>
		<view class="form-item">
			<label>总金额</label>
			<view class="form-value">{{totalAmount}}</view>
		</view>
		<view class="form-item">
			<label>笔数</label>
			<view class="form-value">{{count}}</view>
		</view>

		<!-- 报销明细部分 -->
		<view class="reimbursement-detail" v-for="(detail, index) in reimbursementDetails" :key="index">
			<view class="detail-header">
				<view class="detail-title">报销明细{{index + 1}}</view>
				<view class="delete-btn" v-if="index > 0" @click="deleteDetail(index)">删除</view>
			</view>
			<view class="form-item">
				<label>报销类目</label>
				<picker @change="handleCategoryChange(index, $event)" :value="detail.categoryIndex"
					:range="categoryList">
					<view class="form-value">{{categoryList[detail.categoryIndex]}}</view>
				</picker>
			</view>
			<view class="form-item">
				<label>报销金额</label>
				<input type="number" v-model="detail.amount" placeholder="请输入报销金额">
			</view>
			<view class="form-item">
				<label>成本中心</label>
				<picker @change="handleCostCenterChange(index, $event)" :value="detail.costCenterIndex"
					:range="costCenterList">
					<view class="form-value">{{costCenterList[detail.costCenterIndex]}}</view>
				</picker>
			</view>
			<view class="form-item">
				<label>付款凭证</label>
				<view class="upload-container">
					<view class="upload-btn" @click="chooseImage(index, 'payment')">上传</view>
					<view class="image-container" v-for="(image, imgIndex) in detail.paymentImages" :key="imgIndex">
						<image :src="image" mode="aspectFill"></image>
						<view class="delete-img" @click="deleteImage(index, 'payment', imgIndex)">×</view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<label>发票</label>
				<view class="upload-container">
					<view class="upload-btn" @click="chooseImage(index, 'invoice')">上传</view>
					<view class="image-container" v-for="(image, imgIndex) in detail.invoiceImages" :key="imgIndex">
						<image :src="image" mode="aspectFill"></image>
						<view class="delete-img" @click="deleteImage(index, 'invoice', imgIndex)">×</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 新增明细按钮 -->
		<view class="add-detail-btn" @click="addReimbursementDetail">+新增一条报销明细</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="confirm-btn" @click="submitReimbursement">确认</button>
			<button class="return-btn" @click="goBack">返回</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 基本信息
				userName: '张安',
				totalAmount: 500,
				count: 2,
				// 报销类目列表
				categoryList: ['住宿费', '差旅费', '餐饮费'],
				// 成本中心列表
				costCenterList: ['苏州XXX有限公司', '上海XXX分公司'],
				// 报销明细数组
				reimbursementDetails: [{
						categoryIndex: 0,
						amount: 300,
						costCenterIndex: 0,
						paymentImages: [],
						invoiceImages: []
					},
					{
						categoryIndex: 0,
						amount: 300,
						costCenterIndex: 0,
						paymentImages: [],
						invoiceImages: []
					}
				]
			}
		},
		methods: {
			// 报销类目选择变化处理
			handleCategoryChange(index, e) {
				this.reimbursementDetails[index].categoryIndex = e.target.value;
			},
			// 成本中心选择变化处理
			handleCostCenterChange(index, e) {
				this.reimbursementDetails[index].costCenterIndex = e.target.value;
			},
			// 选择图片
			chooseImage(index, type) {
				uni.chooseImage({
					count: 9,
					success: (res) => {
						if (type === 'payment') {
							this.reimbursementDetails[index].paymentImages = this.reimbursementDetails[index]
								.paymentImages.concat(res.tempFilePaths);
						} else {
							this.reimbursementDetails[index].invoiceImages = this.reimbursementDetails[index]
								.invoiceImages.concat(res.tempFilePaths);
						}
					}
				});
			},
			// 删除图片
			deleteImage(detailIndex, type, imgIndex) {
				if (type === 'payment') {
					this.reimbursementDetails[detailIndex].paymentImages.splice(imgIndex, 1);
				} else {
					this.reimbursementDetails[detailIndex].invoiceImages.splice(imgIndex, 1);
				}
			},
			// 删除报销明细
			deleteDetail(index) {
				this.reimbursementDetails.splice(index, 1);
			},
			// 新增报销明细
			addReimbursementDetail() {
				this.reimbursementDetails.push({
					categoryIndex: 0,
					amount: 0,
					costCenterIndex: 0,
					paymentImages: [],
					invoiceImages: []
				});
			},
			// 提交报销
			submitReimbursement() {
				// 这里写提交报销的逻辑，比如调用后端接口
				console.log('提交报销数据:', this.reimbursementDetails);
			},
			// 返回
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
	.add-reimbursement-container {
		padding: 20rpx;
		background-color: #f7f7f7;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.label {
		width: 100rpx;
		font-size: 28rpx;
	}

	.form-value {
		flex: 1;
		font-size: 28rpx;
		padding: 10rpx;
		background-color: white;
		border-radius: 5rpx;
	}

	.reimbursement-detail {
		background-color: white;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.detail-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.detail-title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.delete-btn {
		color: #FF5555;
		font-size: 28rpx;
		cursor: pointer;
	}

	.upload-container {
		display: flex;
		flex-wrap: wrap;
	}

	.upload-btn {
		background-color: #F5F5F5;
		padding: 10rpx 20rpx;
		border-radius: 5rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		cursor: pointer;
	}

	.image-container {
		width: 80rpx;
		height: 80rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		border-radius: 5rpx;
		overflow: hidden;
		position: relative;
	}

	.image-container image {
		width: 100%;
		height: 100%;
	}

	.delete-img {
		position: absolute;
		top: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		width: 20rpx;
		height: 20rpx;
		text-align: center;
		line-height: 20rpx;
		border-radius: 50%;
		cursor: pointer;
	}

	.add-detail-btn {
		color: #007AFF;
		font-size: 28rpx;
		text-align: center;
		margin-bottom: 20rpx;
		cursor: pointer;
	}

	.action-buttons {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.confirm-btn {
		background-color: #00CC00;
		color: white;
		padding: 15rpx 60rpx;
		width: 80%;
		border-radius: 10rpx;
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	.return-btn {
		background-color: #DDDDDD;
		color: #666;
		padding: 15rpx 60rpx;
		width: 80%;
		border-radius: 10rpx;
		font-size: 30rpx;
	}
</style>